<template>
    <div id="app">
        <el-table
        :span-method="objectSpanMethod"
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
  </div>
</template>

<script>
export default {
    data(){
        return{
             
            pos: [],
            codePos: [],

        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if(columnIndex==1){
                const _row = this.spanArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            if(columnIndex==2){
                const _row = this.spanCodeArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (this.mergeObj[column.property][rowIndex]) {
                return {
                    rowspan:this.mergeObj[column.property][rowIndex],
                    colspan:1
                }
            } else {
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        },
    },
    mounted () {
        // let numerical = 0;
        // for (let key in this.tableData[0]) {
        //     this.mergeObj[key] = []
        //     this.tableData.forEach((item,index) => {
        //         if (index === 0) {
        //             this.mergeObj[key].push(1)
        //         } else {
        //             if (item[key] === this.tableData[index-1][key]) {
        //                 this.mergeObj[key][numerical] += 1;
        //                 this.mergeObj[key].push(0)
        //             } else {
        //                 numerical = index
        //                 this.mergeObj[key].push(1)
        //             }
        //         }
        //     })
        // }
        // console.log(this.mergeObj)
        let data = this.tableData
        this.spanArr = []
        this.spanCodeArr = []
        for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                //如果是第一条记录（即索引是0的时候），向数组中加入１
                this.spanArr.push(1)
                this.spanCodeArr.push(1);
                this.pos = 0
                this.codePos = 0
            } else {
                if (data[i].name === data[i-1].name) {
                    //如果areaName相等就累加，并且push 0
                    this.spanArr[this.pos] += 1
                    this.spanArr.push(0)
                } else {
                    //不相等push 1
                    this.spanArr.push(1)
                    this.pos = i
                }
        
                if (data[i].address === data[i-1].address) {
                    //如果deptCode相等就累加，并且push 0
                    this.spanCodeArr[this.codePos] += 1
                    this.spanCodeArr.push(0)
                } else {
                    //不相等push 1
                    this.spanCodeArr.push(1)
                    this.codePos = i
                }
            }
        }
    }
}
</script>

<style>

</style>